<template>
  <div
    @click="change"
    class="but"
    :class="[type, loading || disabled ? 'loading' : '', round ? 'round' : '']"
  >
    <i v-if="loading" :class="loading ? 'el-icon-loading' : ''"></i>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    change() {
      if (this.loading || this.disabled) return;
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
.but {
  display: inline-block;
  margin-left: 10px;
  padding: 7px 15px;
  font-size: 12px;
  color: #606266;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 3px;
  cursor: pointer;
  &:hover {
    background-color: #eaeef5;
    color: #195fff;
    border-color: #c1d8f8;
    text-decoration: none;
  }
}
.primary {
  background-color: #195fff;
  border-color: #195fff;
  color: #fff;
  &:hover {
    background-color: #3e76f8;
    border-color: #3e76f8;
    color: #fff;
  }
}
.el-icon-loading {
  margin-right: 5px;
}
.loading {
  opacity: 0.7;
  &:hover {
    cursor: not-allowed;
  }
}
.round {
  border-radius: 30px;
}
</style>
